<template>
  <view>
    <view class="iot-detail-swiper">
      <swiper autoplay circular indicator-dots>
        <swiper-item @tap="handlePrevewImage" data-url="item.pics_mid" v-for="(item, index) in goodsObj.pics"
          :key="item.pics_id">
          <image :src="item.pics_mid" mode="widthFix"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="iot-goods-price">{{ goodsObj.goods_price }}</view>
    <view class="iot-good-name-row">
      <view class="iot-goods-name">
        {{ goodsObj.goods_name }}
        {{ goodsObj.goods_name }}
      </view>
      <view class="iot-goods-collect" @tap="handleCollect">
        <text :class="
          'iconfont  ' + (isCollect ? 'icon-shoucang1' : 'icon-shoucang')
        "></text>
        <view class="iot-collect-text">收藏</view>
      </view>
    </view>
    <view class="iot-goods-info">
      <view class="iot-goods-info-title">图文详情</view>
      <view class="iot-goods-info-content">
        <rich-text class="" :nodes="goodsObj.goods_introduce"></rich-text>
      </view>
    </view>
    <view class="iot-btm-tool">
      <view class="iot-tool-item">
        <view class="iconfont icon-kefu"></view>
        <view>客服</view>
        <button open-type="contact"></button>
      </view>
      <view class="iot-tool-item">
        <view class="iconfont icon-fenxiang"></view>
        <view>分享</view>
        <button open-type="share"></button>
      </view>
      <navigator open-type="switchTab" class="iot-tool-item" url="/pages/cart/index">
        <view class="iconfont icon-gouwuchekong"></view>
        <view>购物车</view>
      </navigator>
      <view class="iot-tool-item iot-cart" @tap="handleCartAdd">加入购物车</view>
      <view class="iot-tool-item iot-buy">立即购买</view>
    </view>

  </view>
</template>

<script>
import { request } from '../../request/index.js'

export default {
  data() {
    return {
      goodsObj: [],
      isCollect:false,
      GoodsInfo: {}
    }
  },
  onShow: function () {
    let pages = getCurrentPages()
    let currentPage = pages[pages.length - 1]
    let options = currentPage.options
    const { goods_id } = options
    console.log(pages)
    console.log(goods_id)
    this.getGoodDetail(goods_id)
  },
  methods: {
    async getGoodDetail(goods_id) {
      const goodsObj = await request({
        url: '/goods/detail',
        data:{goods_id}
      })
      this.GoodsInfo = goodsObj
      this.goodsObj=goodsObj
      

      let collect = uni.getStorageSync('collect') || []
      let isCollect = collect.some(
        (v) => v.goods_id === this.GoodsInfo.goods_id
      )
      this.goodsObj.goods_name = goodsObj.goods_name
      this.goodsObj.goods_price = goodsObj.goods_price
      /* this.goodsObj.goods_introduce = goodsObj.goods_introduce.replace(
        /\.webp/g,
        '/App/pages/goods-detail/.jpg'
      ), */
      this.goodsObj.pics = goodsObj.pics
      this.isCollect = isCollect
    },
    handlePrevewImage(e) {
      const urls = this.GoodsInfo.pics.map((v) => v.pics_mid)
      const current = e.currentTarget.dataset.url
      uni.previewImage({
        current,
        urls
      })
    },

    handleCartAdd() {
      let cart = uni.getStorageSync('cart') || []
      let index = cart.findIndex((v) => v.goods_id === this.GoodsInfo.goods_id)
      if (index === -1) {
        this.GoodsInfo.num = 1
        this.GoodsInfo.checked = true
        cart.push(this.GoodsInfo)
      } else {
        cart[index].num++
      }
      uni.setStorageSync('cart', cart)
      uni.showToast({
        title: '加入成功',
        icon: 'success',
        mask: true
      })
    },

    handleCollect() {
      this.isCollect = false
      // 1 获取缓存中的商品收藏数组
      let collect = uni.getStorageSync('collect') || []
      // 2 判断该商品是否被收藏过
      let index = collect.findIndex(
        (v) => v.goods_id === this.GoodsInfo.goods_id
      )
      // 3 当index！=-1表示 已经收藏过
      if (index !== -1) {
        // 能找到 已经收藏过了  在数组中删除该商品
        collect.splice(index, 1)
        isCollect = false
        uni.showToast({
          title: '取消成功',
          icon: 'success',
          mask: true
        })
      } else {
        // 没有收藏过
        collect.push(this.GoodsInfo)
        isCollect = true
        uni.showToast({
          title: '收藏成功',
          icon: 'success',
          mask: true
        })
      }
      // 4 把数组存入到缓存中
      uni.setStorageSync('collect', collect)
      // 5 修改data中的属性  isCollect
      this.isCollect = isCollect
    }
  }
}
</script>
<style>
@import './index.css';
</style>
